<template>
	<view class="success">
		<image class="banner" src="/static/staff_index/attendance-success.png"></image>
		<view class="title" v-if="type == '1'">打卡成功哦，开始努力工作吧！</view>
		<view class="title" v-else-if="type == '2'">打卡成功哦，请好好休息吧！</view>
		<view class="title" v-else-if="type == '3'">补卡申请提交成功，下次不要忘记打卡哦！</view>
		<view class="title" v-else-if="type == '4'">您不需要补卡哦！</view>
		<view class="title" v-else>打卡成功哦，开始努力工作吧！</view>
		<view class="bottom" @click="goHome">
			<view class="button">返回首页</view>
			<view class="countdown">{{ countdownNum }}秒钟后自动返回首页哦</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				countdownNum: 3,
				type: '1'
			};
		},
		onShow() {
			let type = uni.getStorageSync("type")
			console.log(type)
			this.type = type
			 this.startCountdown();
		},
		methods: {
			goHome() {
				uni.redirectTo({
					url: '/pages/staff/index/index'
				});
			},
			startCountdown() {
				if (this.countdownNum > 0) {
					// 如果倒计时数字大于0，继续倒计时
					this.countdownNum -= 1;
					setTimeout(() => {
						this.startCountdown(); // 递归调用，实现循环
					}, 1000);
				} else {
					// 倒计时结束，跳转到目标页面
					this.goHome();
				}
			}
		}
	};
</script>
<style>
	page {
		background-color: #fafafa;
	}

	.success {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #fafafa;
	}

	.success .banner {
		padding-top: 94rpx;
		width: 398rpx;
		height: 364rpx;
	}

	.success .title {
		line-height: 76rpx;
		font-size: 32rpx;
		color: #000000;
	}

	.success .bottom {
		position: fixed;
		bottom: 38rpx;
		text-align: center;
		font-size: 22rpx;
		color: #999999;
		line-height: 38rpx;
	}

	.success .bottom .button {
		color: #438cff;
	}
</style>